<template>
  <div class="main">
    <div class="col_text_center">
      {{ form.Name }}
    </div>
    <div>
      <eagle-cell-group :border="border">
        <eagle-row class="rowTitle">
          <eagle-col
            span="10"
            class="col_text_left"
          >
            <span class="spanTitle1">告知卡编号</span>
          </eagle-col>
          <eagle-col span="14">
            <span class="spanValue">{{ form.NotifyCardCode }}</span>
          </eagle-col>
        </eagle-row>
        <eagle-row class="rowTitle">
          <eagle-col
            span="10"
            class="col_text_left"
          >
            <span class="spanTitle1">风险点名称</span>
          </eagle-col>
          <eagle-col span="14">
            <span class="spanValue">{{ form.RiskPointName }}</span>
          </eagle-col>
        </eagle-row>
        <eagle-row class="rowTitle">
          <eagle-col
            span="10"
            class="col_text_left"
          >
            <span class="spanTitle1">管控总负责人/电话</span>
          </eagle-col>
          <eagle-col span="14">
            <span class="spanValue">{{ form.CompanyDirectorName }}</span><br />
            <span class="spanValue">{{ form.CompanyDirectorMobile }}
            </span>
          </eagle-col>
        </eagle-row>
        <eagle-row class="rowTitle">
          <eagle-col
            span="10"
            class="col_text_left"
          >
            <span class="spanTitle1">作业场景图示</span>
          </eagle-col>
          <eagle-col span="14">
            <van-field
              class="input_text"
              style="margin-left:-15px"
              :value="form.JobSceneAttachs"
              readonly
            >
              <template #input>
                <eagle-image-preview :images="form.JobSceneAttachs">
                </eagle-image-preview>
              </template>
            </van-field>
          </eagle-col>
        </eagle-row>
      </eagle-cell-group>
    </div>
    <div class="mt-10">
      <eagle-collapse v-model="activeNames">
        <eagle-collapse-item
          title="较大危险因素"
          name="1"
        >
          <eagle-row class="rowBack">
            <eagle-row
              v-for="(item, index) in form.Details"
              :key="index"
            >
              <eagle-col span="24">
                <span class="spanTitle">
                  {{ index + 1 }}、{{ item.DangerFactor }}
                </span>
              </eagle-col>
              <eagle-col span="24">
                <span class="spanValue">
                  可能的后果：{{ item.LatentConsequencesName }}
                </span>
              </eagle-col>
              <eagle-col span="24">
                <span class="spanValue">
                  事故类型：{{ item.AccidentName }}
                </span>
              </eagle-col>
              <eagle-row class="riskLevel">
                <eagle-col span="12">
                  <span>固有风险：</span>
                  <span
                    class="riskLevelnone"
                    v-bind:class="{
                      riskLevel1: item.EvaluationName == '重大风险',
                      riskLevel2: item.EvaluationName == '较大风险',
                      riskLevel3: item.EvaluationName == '一般风险',
                      riskLevel5:
                        item.EvaluationName == '低风险' ||
                        item.EvaluationName == '稍有危险',
                    }"
                  >{{ item.EvaluationName }}</span>
                </eagle-col>
                <eagle-col span="12">
                  <span class="mr-10">现状风险：</span>
                  <span
                    class="riskLevelnone"
                    v-bind:class="{
                      riskLevel1: item.EvaluationResultName == '重大风险',
                      riskLevel2: item.EvaluationResultName == '较大风险',
                      riskLevel3: item.EvaluationResultName == '一般风险',
                      riskLevel5:
                        item.EvaluationResultName == '低风险' ||
                        item.EvaluationResultName == '稍有危险',
                    }"
                  >{{ item.EvaluationResultName }}</span>
                </eagle-col>
              </eagle-row>
            </eagle-row>
          </eagle-row>
        </eagle-collapse-item>
        <eagle-collapse-item
          title="直接措施"
          name="2"
        >
          <eagle-tabs v-model="active">
            <eagle-tab title="按措施类型展示">
              <eagle-row class="rowBack">
                <eagle-row>
                  <div
                    span="10"
                    class="col_text_left"
                    v-for="(item, index) in form.Details8"
                    :key="index"
                  >
                    <span class="spanTitle3">
                      【{{ item.MeasureTypeName }}】</span>
                    <!-- </van-col> -->
                    <eagle-col
                      span="24"
                      class="ml-5"
                      v-for="(item2, index2) in form.Details2"
                      :key="index2"
                      v-if="item2.MeasureTypeName == item.MeasureTypeName"
                    >
                      <span class="spanTitle"><span class="point">●</span> {{ item2.CounterMeasures }}
                        <eagle-button
                          class="btnP"
                          size="small"
                          type="info"
                          @click="getListDetail(item2.RPICode)"
                        >详情
                        </eagle-button>
                      </span>
                    </eagle-col>
                  </div>
                </eagle-row>
              </eagle-row>
            </eagle-tab>
            <eagle-tab title="按步骤/单元展示">
              <eagle-row class="rowBack">
                <eagle-row>
                  <div
                    span="10"
                    class="col_text_left"
                    v-for="(item, index) in form.Details9"
                    :key="index"
                  >
                    <span class="spanTitle3">
                      【{{ item.Activity }}】</span>
                    <!-- </van-col> -->
                    <eagle-col
                      span="24"
                      class="ml-5"
                      v-for="(item2, index) in form.Details2"
                      v-if="item2.Activity == item.Activity"
                      :key="index"
                    >
                      <span class="spanTitle"><span class="point">●</span> {{ item2.CounterMeasures }}
                        <eagle-button
                          class="btnP"
                          size="small"
                          type="info"
                          @click="getListDetail(item2.RPICode)"
                        >详情
                        </eagle-button>
                      </span>
                    </eagle-col>
                  </div>
                </eagle-row>
              </eagle-row>
            </eagle-tab>
            <eagle-tab title="按危险因素展示">
              <eagle-row class="rowBack">
                <eagle-row>
                  <div
                    span="10"
                    class="col_text_left"
                    v-for="(item, index) in form.Details10"
                    :key="index"
                  >
                    <span class="spanTitle3">
                      【{{ item.DangerFactor }}】</span>
                    <!-- </van-col> -->
                    <eagle-col
                      span="24"
                      class="ml-5"
                      v-for="(item2, index) in form.Details2"
                      v-if="item2.DangerFactor == item.DangerFactor"
                      :key="index"
                    >
                      <span class="spanTitle"><span class="point">●</span> {{ item2.CounterMeasures }}
                        <eagle-button
                          class="btnP"
                          size="small"
                          type="info"
                          @click="getListDetail(item2.RPICode)"
                        >详情
                        </eagle-button>
                      </span>
                    </eagle-col>
                  </div>
                </eagle-row>
              </eagle-row>
            </eagle-tab>
          </eagle-tabs>
        </eagle-collapse-item>
        <eagle-collapse-item
          title="管理措施"
          name="3"
        >
          <eagle-row
            class="rowBack"
            v-if="form.Details5Length > 0"
          >
            <eagle-row>
              <eagle-col
                span="15"
                class="col_text_left"
              >
                <span class="spanTitle"><img
                    src="@/assets/Images/AppIcon/icon_managemeasures.png"
                    alt=""
                  />
                  管理措施
                </span>
              </eagle-col>
              <eagle-col
                span="24"
                v-for="(item, index) in form.Details5"
                :key="index"
              >
                <span class="spanTitle">{{ index + 1 }}、{{ item.CounterMeasures }}</span>
              </eagle-col>
            </eagle-row>
          </eagle-row>
          <eagle-row
            class="rowBack2"
            v-if="form.Details6Length > 0"
          >
            <eagle-row>
              <eagle-col
                span="15"
                class="col_text_left"
              >
                <span class="spanTitle"><img
                    src="@/assets/Images/AppIcon/icon_trainmeasures.png"
                    alt=""
                  />
                  教育培训措施
                </span>
              </eagle-col>
              <eagle-col
                span="24"
                v-for="(item, index) in form.Details6"
                :key="index"
              >
                <span class="spanTitle">{{ index + 1 }}、{{ item.CounterMeasures }}</span>
              </eagle-col>
            </eagle-row>
          </eagle-row>
          <eagle-row
            class="rowBack2"
            v-if="form.Details7Length > 0"
          >
            <eagle-row>
              <eagle-col
                span="15"
                class="col_text_left"
              >
                <span class="spanTitle"><img
                    src="@/assets/Images/AppIcon/icon_emergencymeasures.png"
                    alt=""
                  />
                  应急处置措施
                </span>
              </eagle-col>
              <eagle-col
                span="24"
                v-for="(item, index) in form.Details7"
                :key="index"
              >
                <span class="spanTitle">
                  {{ index + 1 }}、{{ item.CounterMeasures }}</span>
              </eagle-col>
            </eagle-row>
          </eagle-row>
        </eagle-collapse-item>
        <eagle-collapse-item
          title="安全标示"
          name="4"
        >
          <eagle-row
            :gutter="20"
            type="flex"
          >
            <eagle-col
              span="5"
              v-for="(item, index) in form.Details3"
              :key="index"
              type="flex"
            >
              <div>
                <van-image
                  width="50"
                  height="50"
                  fit="Attachs"
                  :src="baseUrl + item.Attachs"
                />
              </div>
            </eagle-col>
          </eagle-row>
        </eagle-collapse-item>
      </eagle-collapse>
    </div>
    <div class="bottom_submit">
      <eagle-button
        type="info"
        @click="goToCheck()"
      >
        措施复核
      </eagle-button>
      <eagle-button
        type="primary"
        @click="goFile(form.NotifyCardCode)"
      >
        查看卡片
      </eagle-button>
      <!-- 弹出层 -->
      <eagle-dialog
        v-model="show"
        title="详细信息"
        isCustomButton
      >
        <eagle-cell-group
          :border="border"
          v-for="(item, index) in form.Details11"
          :key="index"
        >
          <eagle-row class="rowTitle">
            <eagle-col
              span="9"
              class="col_text_left"
            ><span class="spanTitle2">步骤/单元</span>
            </eagle-col>
            <eagle-col span="15"><span class="spanValue">{{
                    item.Activity
                  }}</span></eagle-col>
          </eagle-row>
          <eagle-row class="rowTitle">
            <eagle-col
              span="9"
              class="col_text_left"
            ><span class="spanTitle2">危险有害因素</span>
            </eagle-col>
            <eagle-col span="15"><span class="spanValue">{{ item.DangerFactor }}</span></eagle-col>
          </eagle-row>
          <eagle-row class="rowTitle">
            <eagle-col
              span="9"
              class="col_text_left"
            ><span class="spanTitle2">潜在事故后果</span>
            </eagle-col>
            <eagle-col span="15"><span class="spanValue">{{ item.LatentConsequencesName }}</span></eagle-col>
          </eagle-row>
          <eagle-row class="rowTitle">
            <eagle-col
              span="9"
              class="col_text_left"
            ><span class="spanTitle2">管理措施类型</span>
            </eagle-col>
            <eagle-col span="15"><span class="spanValue">{{ item.MeasureTypeName }}</span></eagle-col>
          </eagle-row>
          <eagle-row class="rowTitle">
            <eagle-col
              span="9"
              class="col_text_left"
            ><span class="spanTitle2">管理措施内容</span>
            </eagle-col>
            <eagle-col span="15"><span class="spanValue">{{ item.CounterMeasures }}</span></eagle-col>
          </eagle-row>
          <eagle-row class="rowTitle">
            <eagle-col
              span="9"
              class="col_text_left"
            ><span class="spanTitle2">风险管控层级</span>
            </eagle-col>
            <eagle-col span="15"><span class="spanValue">{{ item.ControlLevel }}</span></eagle-col>
          </eagle-row>
          <eagle-row class="rowTitle">
            <eagle-col
              span="9"
              class="col_text_left"
            ><span class="spanTitle2">措施执行岗位</span>
            </eagle-col>
            <eagle-col span="15"><span class="spanValue">{{ item.OrgPostName }}</span></eagle-col>
          </eagle-row>
        </eagle-cell-group>
        <template #buttons>
          <span
            class="complete-btn"
            @click="confirm"
          >关闭</span>
        </template>
      </eagle-dialog>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["baseUrl", "CompanyCode"]),
  },
  created() {
    this.isJG= this.$store.state.CompanyType=='JG'
    this.getDetail();
  },
  data() {
    return {
      id: this.$route.query.id,
      border: false,
      form: {},
      data: {},
      imgs: [],
      active: 0,
      tCode: "",
      show: false,
      activeNames: [""],
      isJG:false
    };
  },
  methods: {
    getDetail() {
      let _this = this;
      let params = {
        id: _this.id,
      };
      _this.$axios
        .get("/RiskNotifyCard/GetDetail", { params: params })
        .then((res) => {
          var data = res.data;
          data.Details5 = [];
          data.Details6 = [];
          data.Details7 = [];
          //措施类型
          data.Details8 = [];
          //步骤单元
          data.Details9 = [];
          //危险因素
          data.Details10 = [];
          data.Details11 = [];
          data.Details5Length = 0;
          data.Details6Length = 0;
          data.Details7Length = 0;
          if (data.Details4.length > 0) {
            data.Details4.forEach((element) => {
              switch (element.MeasureType2Name) {
                case "管理措施":
                  data.Details5.push(element);
                  break;
                case "教育培训措施":
                  data.Details6.push(element);
                  break;
                case "应急处置措施":
                  data.Details7.push(element);
                  break;
              }
            });
          }
          data.Details2.forEach((element) => {
            const index1 = data.Details8.findIndex(
              (x) => x.MeasureTypeName === element.MeasureTypeName
            );
            const index2 = data.Details9.findIndex(
              (x) => x.Activity === element.Activity
            );
            const index3 = data.Details10.findIndex(
              (x) => x.DangerFactor === element.DangerFactor
            );
            if (index1 < 0) {
              data.Details8.push(element);
            }
            if (index2 < 0) {
              data.Details9.push(element);
            }
            if (index3 < 0) {
              data.Details10.push(element);
            }
          });
          data.Details5Length = data.Details5.length;
          data.Details6Length = data.Details6.length;
          data.Details7Length = data.Details7.length;
          _this.form = data;
        });
    },
    getListDetail(code) {
      this.form.Details2.forEach((element) => {
        if (code === element.RPICode) {
          this.form.Details11.push(element);
        }
      });
      this.show = true;
      console.log(this.form.Details11);
    },
    confirm() {
      this.show = false;
      this.form.Details11.length = 0;
    },
    // 文件页面
    goFile(attachCode) {
      if (attachCode.startsWith("GZK")) {
        let _this = this;
        _this.$axios
          .get("/RiskNotifyCard/GetDetailByCode", {
            params: { code: attachCode },
          })
          .then((res) => {
            _this.preview(res.data.Attachs);
          });
      }
    },
    preview(item, index) {
      if (item) {
        let imgs = item.split(";");
        let arry = [];
        imgs.map((item, index) => {
          arry.push(this.baseUrl + item);
        });
        ImagePreview({
          images: arry,
          startPosition: index || 0,
        });
      }
    },
    goToCheck() {
      let _this = this;
      let params = {
        id: _this.id,
        CompanyCode: _this.CompanyCode,
      };
      _this.$axios
        .get("/RiskNotifyCard/GenerateToTemplate", { params: params })
        .then((res) => {
          _this.form = res.data;
          _this.tCode = _this.form.TCode;
          _this.goCheckList();
        });
    },
    goCheckList() {
      let url = this.isJG?"/Danger/DangerTemplateDetailJG":"/Danger/DangerTemplateDetail"
      this.$router.push({
        path: url,
        query: {
          tCode: this.tCode,
          CompanyCode: this.CompanyCode,
        },
      });
    },
  },
};
</script>
<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.space-between {
  justify-content: space-between;
}

.col_text_left {
  text-align: left;
}

.bottom_submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;

  .van-button {
    width: 45%;
    height: 35px;
  }
}

.spanTitle {
  font-size: 14px;
  color: #646566;
  width: 80px;
  line-height: 30px;
  margin-right: 20px;

  img {
    width: 20px;
  }
}

.spanTitle1 {
  font-size: 14px;
  color: #323233;
  width: 80px;
  padding-left: 10px;
  line-height: 30px;
  margin-right: 20px;
}

.spanTitle2 {
  font-size: 14px;
  color: #323233;
  width: 80px;
  line-height: 30px;
}

.spanValue {
  font-size: 14px;
  color: #969799;
  line-height: 28px;
}

.rowBack {
  background-color: #f8f9f9;
  padding: 8px;
}

.rowBack2 {
  margin-top: 10px;
  background-color: #f8f9f9;
  padding: 8px;
}

.rowTitle {
  padding: 7px;
}

.col_text_center {
  text-align: center;
  margin: 15px;
  font-size: 15px;
}

.riskLevel span {
  border-radius: 3px;
  font-size: 14px;
}

.riskLevel {
  line-height: 35px;

  .riskLevelnone {
    background: green;
  }

  .riskLevel1 {
    background: #ff0000;
    color: #ffffff;
    padding: 5px;
  }

  .riskLevel2 {
    background: #ffc000;
    color: #ffffff;
    padding: 5px;
  }

  .riskLevel3 {
    background: #ffff00;
    color: #ffffff;
    padding: 5px;
  }

  .riskLevel5 {
    background: #00b0f0;
    color: #ffffff;
    padding: 5px;
  }
}

.btnP {
  height: 20px;
  position: relative;
  bottom: 4px;
}
.spanTitle3 {
  font-size: 16px;
  color: #323233;
  width: 80px;
  line-height: 30px;
  margin-right: 20px;
}
.point {
  font-size: 10px;
  color: #1989fa;
}
</style>